React useState: 상태 Hook 최적화 전략 마스터하기

useState Hook은 React에서 컴포넌트 상태를 관리하기 위한 기본적인 구성 요소입니다. 매우 다재다능하고 사용하기 쉽지만, 부적절하게 사용하면 특히 복잡한 애플리케이션에서 성능 병목 현상을 초래할 수 있습니다. 이 종합 가이드에서는 React 애플리케이션의 성능과 유지보수성을 보장하기 위해 useState를 최적화하는 고급 전략을 탐구합니다.

useState의 이해와 그 영향

최적화 기법을 살펴보기 전에 useState의 기본을 다시 짚어보겠습니다. useState Hook은 함수형 컴포넌트가 상태를 가질 수 있도록 합니다. 이 Hook은 상태 변수와 그 변수를 업데이트하는 함수를 반환합니다. 상태가 업데이트될 때마다 컴포넌트는 다시 렌더링됩니다.

기본 예제:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

export default Counter;

이 간단한 예제에서 "Increment" 버튼을 클릭하면 count 상태가 업데이트되고, Counter 컴포넌트의 리렌더링이 발생합니다. 이는 작은 컴포넌트에서는 완벽하게 작동하지만, 대규모 애플리케이션에서 제어되지 않는 리렌더링은 성능에 심각한 영향을 미칠 수 있습니다.

useState를 최적화해야 하는 이유

불필요한 리렌더링은 React 애플리케이션 성능 문제의 주범입니다. 모든 리렌더링은 리소스를 소비하며, 느린 사용자 경험으로 이어질 수 있습니다. useState를 최적화하면 다음과 같은 이점이 있습니다:

• 불필요한 리렌더링 감소: 컴포넌트의 상태가 실제로 변경되지 않았을 때 리렌더링되는 것을 방지합니다.
• 성능 향상: 애플리케이션을 더 빠르고 반응성 있게 만듭니다.
• 유지보수성 증진: 더 깔끔하고 효율적인 코드를 작성합니다.

최적화 전략 1: 함수형 업데이트

이전 상태를 기반으로 상태를 업데이트할 때는 항상 setCount의 함수형 업데이트를 사용해야 합니다. 이는 오래된 클로저(stale closure) 문제를 방지하고 항상 최신 상태 값으로 작업할 수 있도록 보장합니다.

잘못된 방법 (문제가 될 수 있음):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(count + 1); // 오래된 'count' 값일 수 있음
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

올바른 방법 (함수형 업데이트):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1); // 정확한 'count' 값을 보장
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

setCount(prevCount => prevCount + 1)를 사용하면 setCount에 함수를 전달하게 됩니다. 그러면 React는 상태 업데이트를 큐에 넣고 가장 최신 상태 값으로 해당 함수를 실행하여 오래된 클로저 문제를 피할 수 있습니다.

최적화 전략 2: 불변성을 지키는 상태 업데이트

상태에서 객체나 배열을 다룰 때는 항상 불변성을 지켜 업데이트해야 합니다. 상태를 직접 변경(mutate)하면 React가 참조 동일성(referential equality)을 사용하여 변경 사항을 감지하기 때문에 리렌더링이 발생하지 않습니다. 대신, 원하는 수정 사항을 적용한 객체나 배열의 새로운 복사본을 만들어야 합니다.

잘못된 방법 (상태 직접 변경):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    const item = items.find(item => item.id === id);
    if (item) {
      item.quantity = newQuantity; // 직접 변경! 리렌더링을 유발하지 않음.
      setItems(items); // React가 변경을 감지하지 못해 문제가 발생함.
    }
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

올바른 방법 (불변성을 지킨 업데이트):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

수정된 버전에서는 .map()을 사용하여 업데이트된 항목이 포함된 새 배열을 만듭니다. 전개 연산자(...item)를 사용하여 기존 속성을 가진 새 객체를 만들고 quantity 속성을 새 값으로 덮어씁니다. 이렇게 하면 setItems가 새 배열을 받아 리렌더링을 유발하고 UI를 업데이트하게 됩니다.

최적화 전략 3: 불필요한 리렌더링을 피하기 위한 `useMemo` 사용

useMemo hook은 계산 결과를 메모이제이션(memoization)하는 데 사용될 수 있습니다. 이는 계산 비용이 비싸고 특정 상태 변수에만 의존할 때 유용합니다. 해당 상태 변수가 변경되지 않았다면 useMemo는 캐시된 결과를 반환하여 계산이 다시 실행되는 것을 막고 불필요한 리렌더링을 피할 수 있습니다.

예제:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const [multiplier, setMultiplier] = useState(2);

  // 'data'와 'multiplier'에만 의존하는 비용이 큰 계산
  const processedData = useMemo(() => {
    console.log('데이터 처리 중...');
    // 비용이 큰 연산 시뮬레이션
    let result = data.map(item => item * multiplier);
    return result;
  }, [data, multiplier]);

  return (
    

      
Processed Data: {processedData.join(', ')}
       setMultiplier(multiplier + 1)}>Increment Multiplier
    
  );
}

function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  return (
    

      
       setData([6, 7, 8, 9, 10])}>Change Data
    
  );
}

export default App;

이 예제에서 processedData는 data나 multiplier가 변경될 때만 다시 계산됩니다. 만약 ExpensiveComponent의 다른 상태 부분이 변경되더라도 컴포넌트는 리렌더링되지만, processedData는 다시 계산되지 않아 처리 시간을 절약할 수 있습니다.

최적화 전략 4: 함수를 메모이제이션하기 위한 `useCallback` 사용

useMemo와 유사하게, useCallback은 함수를 메모이제이션합니다. 이는 자식 컴포넌트에 함수를 props로 전달할 때 특히 유용합니다. useCallback이 없으면 렌더링마다 새로운 함수 인스턴스가 생성되어, props가 실제로 변경되지 않았음에도 자식 컴포넌트가 리렌더링될 수 있습니다. 이는 React가 엄격한 동등성(===)을 사용하여 props의 차이를 확인하는데, 새로운 함수는 항상 이전 함수와 다르기 때문입니다.

예제:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {
  console.log('Button 렌더링됨');
  return {children};
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  // increment 함수를 메모이제이션
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 빈 의존성 배열은 이 함수가 한 번만 생성됨을 의미

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default ParentComponent;

이 예제에서는 increment 함수가 빈 의존성 배열과 함께 useCallback을 사용하여 메모이제이션되었습니다. 이는 함수가 컴포넌트가 마운트될 때 한 번만 생성된다는 것을 의미합니다. Button 컴포넌트는 React.memo로 감싸져 있으므로 props가 변경될 때만 리렌더링됩니다. increment 함수는 모든 렌더링에서 동일하므로 Button 컴포넌트는 불필요하게 리렌더링되지 않습니다.

최적화 전략 5: 함수형 컴포넌트를 위한 `React.memo` 사용

React.memo는 함수형 컴포넌트를 메모이제이션하는 고차 컴포넌트(HOC)입니다. props가 변경되지 않았다면 컴포넌트가 리렌더링되는 것을 방지합니다. 이는 props에만 의존하는 순수 컴포넌트(pure component)에 특히 유용합니다.

예제:

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('MyComponent 렌더링됨');
  return 
Hello, {name}!
;
});

export default MyComponent;

React.memo를 효과적으로 사용하려면 컴포넌트가 순수(pure)한지 확인해야 합니다. 즉, 동일한 입력 props에 대해 항상 동일한 출력을 렌더링해야 합니다. 만약 컴포넌트에 부수 효과(side effect)가 있거나 변경될 수 있는 컨텍스트에 의존한다면 React.memo는 최상의 해결책이 아닐 수 있습니다.

최적화 전략 6: 거대 컴포넌트 분리하기

복잡한 상태를 가진 거대 컴포넌트는 성능 병목 현상의 원인이 될 수 있습니다. 이러한 컴포넌트를 더 작고 관리하기 쉬운 단위로 분리하면 리렌더링을 국소화하여 성능을 향상시킬 수 있습니다. 애플리케이션 상태의 일부가 변경될 때, 거대 컴포넌트 전체가 아닌 관련된 하위 컴포넌트만 리렌더링하면 됩니다.

예제 (개념적):

사용자 정보와 활동 피드를 모두 처리하는 거대한 UserProfile 컴포넌트 하나를 두는 대신, UserInfo와 ActivityFeed 두 개의 컴포넌트로 분리하세요. 각 컴포넌트는 자신만의 상태를 관리하며, 자신의 특정 데이터가 변경될 때만 리렌더링됩니다.

최적화 전략 7: 복잡한 상태 로직을 위한 `useReducer`와 리듀서 사용

복잡한 상태 전환을 다룰 때 useReducer는 useState의 강력한 대안이 될 수 있습니다. 이는 상태를 관리하는 더 구조화된 방법을 제공하며 종종 더 나은 성능으로 이어질 수 있습니다. useReducer hook은 여러 하위 값을 포함하고 액션에 따라 세분화된 업데이트가 필요한 복잡한 상태 로직을 관리합니다.

예제:

import React, { useReducer } from 'react';

const initialState = { count: 0, theme: 'light' };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'toggleTheme':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
Count: {state.count}
      
Theme: {state.theme}
       dispatch({ type: 'increment' })}>Increment
       dispatch({ type: 'decrement' })}>Decrement
       dispatch({ type: 'toggleTheme' })}>Toggle Theme
    
  );
}

export default Counter;

이 예제에서 reducer 함수는 상태를 업데이트하는 다양한 액션을 처리합니다. useReducer는 렌더링 최적화에도 도움이 될 수 있는데, 이는 여러 개의 useState hook으로 인해 발생할 수 있는 광범위한 리렌더링과 비교하여, 메모이제이션을 통해 상태의 어떤 부분이 컴포넌트 렌더링을 유발할지 제어할 수 있기 때문입니다.

최적화 전략 8: 선택적 상태 업데이트

때로는 컴포넌트에 여러 상태 변수가 있지만, 그 중 일부만 변경될 때 리렌더링을 유발할 수 있습니다. 이런 경우, 여러 useState hook을 사용하여 선택적으로 상태를 업데이트할 수 있습니다. 이를 통해 실제로 업데이트가 필요한 컴포넌트 부분에만 리렌더링을 국한시킬 수 있습니다.

예제:

import React, { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [location, setLocation] = useState('New York');

  // 위치가 변경될 때만 위치를 업데이트
  const handleLocationChange = (newLocation) => {
    setLocation(newLocation);
  };

  return (
    

      
Name: {name}
      
Age: {age}
      
Location: {location}
       handleLocationChange('London')}>Change Location
    
  );
}

export default MyComponent;

이 예제에서 location을 변경하면 location을 표시하는 컴포넌트 부분만 리렌더링됩니다. name과 age 상태 변수는 명시적으로 업데이트되지 않는 한 컴포넌트를 리렌더링하지 않습니다.

최적화 전략 9: 디바운싱과 스로틀링을 이용한 상태 업데이트

상태 업데이트가 빈번하게 발생하는 시나리오(예: 사용자 입력 중)에서는 디바운싱(debouncing)과 스로틀링(throttling)이 리렌더링 횟수를 줄이는 데 도움이 될 수 있습니다. 디바운싱은 함수가 마지막으로 호출된 후 일정 시간이 지날 때까지 함수 호출을 지연시킵니다. 스로틀링은 주어진 시간 동안 함수가 호출될 수 있는 횟수를 제한합니다.

예제 (디바운싱):

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce'; // lodash 설치: npm install lodash

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSetSearchTerm = useCallback(
    debounce((text) => {
      setSearchTerm(text);
      console.log('검색어 업데이트:', text);
    }, 300),
    []
  );

  const handleInputChange = (event) => {
    debouncedSetSearchTerm(event.target.value);
  };

  return (
    

      
      
Searching for: {searchTerm}
    
  );
}

export default SearchComponent;

이 예제에서는 Lodash의 debounce 함수를 사용하여 setSearchTerm 함수 호출을 300밀리초 지연시킵니다. 이는 모든 키 입력마다 상태가 업데이트되는 것을 방지하여 리렌더링 횟수를 줄여줍니다.

최적화 전략 10: 비차단 UI 업데이트를 위한 `useTransition` 사용

메인 스레드를 차단하고 UI 정지를 유발할 수 있는 작업의 경우, useTransition hook을 사용하여 상태 업데이트를 긴급하지 않은 것으로 표시할 수 있습니다. 그러면 React는 긴급하지 않은 상태 업데이트를 처리하기 전에 사용자 상호작용과 같은 다른 작업을 우선적으로 처리합니다. 이는 계산 집약적인 작업을 처리할 때에도 더 부드러운 사용자 경험을 제공합니다.

예제:

import React, { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const loadData = () => {
    startTransition(() => {
      // API에서 데이터 로딩 시뮬레이션
      setTimeout(() => {
        setData([1, 2, 3, 4, 5]);
      }, 1000);
    });
  };

  return (
    

      
        {isPending ? '로딩 중...' : '데이터 로드'}
      
      {isPending && 
Loading data...
}
      {data.length > 0 && 
Data: {data.join(', ')}
}
    
  );
}

export default MyComponent;

이 예제에서 startTransition 함수는 setData 호출을 긴급하지 않은 것으로 표시하는 데 사용됩니다. 그러면 React는 상태 업데이트를 처리하기 전에 로딩 상태를 반영하도록 UI를 업데이트하는 등 다른 작업을 우선적으로 처리합니다. isPending 플래그는 전환이 진행 중인지 여부를 나타냅니다.

고급 고려사항: 컨텍스트와 전역 상태 관리

공유 상태가 있는 복잡한 애플리케이션의 경우 React 컨텍스트(Context)나 Redux, Zustand, Jotai와 같은 전역 상태 관리 라이브러리를 사용하는 것을 고려해 보세요. 이러한 솔루션은 컴포넌트가 필요한 상태의 특정 부분만 구독하도록 허용하여 상태를 관리하고 불필요한 리렌더링을 방지하는 더 효율적인 방법을 제공할 수 있습니다.

결론

useState를 최적화하는 것은 성능이 뛰어나고 유지보수하기 좋은 React 애플리케이션을 구축하는 데 매우 중요합니다. 상태 관리의 미묘한 차이를 이해하고 이 가이드에 설명된 기술을 적용함으로써 React 애플리케이션의 성능과 반응성을 크게 향상시킬 수 있습니다. 애플리케이션을 프로파일링하여 성능 병목 현상을 식별하고, 특정 요구에 가장 적합한 최적화 전략을 선택하는 것을 잊지 마세요. 실제 성능 문제를 확인하지 않고 섣불리 최적화하지 마십시오. 먼저 깔끔하고 유지보수 가능한 코드를 작성하는 데 집중하고, 필요에 따라 최적화하세요. 핵심은 성능과 코드 가독성 사이의 균형을 맞추는 것입니다.